<template>
  <el-card shadow="never" style="margin-top: 16px" :body-style="{ padding: '12px' }">
    <div class="title">Billing History</div>
    <el-table
        v-loading="loading"
        height="40vh"
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="transactionId"
          :label="$t('billing.transactionId')">
      </el-table-column>
      <el-table-column
          prop="date"
          :label="$t('billing.transactionTime')">
        <template slot-scope="scope">{{scope.row.date | UTCFormat}}</template>
      </el-table-column>
      <el-table-column
          prop="status"
          :label="$t('billing.status')">
      </el-table-column>
      <el-table-column
          prop="type"
          :label="$t('billing.type')">
      </el-table-column>
      <el-table-column
          prop="maskedCardNumber"
          :label="$t('billing.cardNumber')">
      </el-table-column>
      <el-table-column
          prop="amount"
          :label="$t('billing.amount')">
      </el-table-column>
      <el-table-column :label="$t('billing.invoice')">
        <template slot-scope="scope">
          <el-tooltip content="Download" placement="top" :open-delay="1000">
            <div class="icon" @click="download(scope.row)">
              <i class="cuifont icon_download"></i>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import axios from 'axios'
import JsFileDownload from 'js-file-download'
function getUrlParams (url) {
  let urlStr = url.split('?')[1]
  const urlSearchParams = new URLSearchParams(urlStr)
  const result = Object.fromEntries(urlSearchParams.entries())
  return result
}
export default {
  name: 'billingHistory',
  props: ['customer', 'timestamp'],
  data () {
    return {
      tableData: [],
      loading: false
    }
  },
  watch: {
    timestamp () {
      this.getData()
    }
  },
  methods: {
    async getData () {
      if (!this.customer.id) return false
      this.loading = true
      const { billingHistoryList } = this.$interface.pay
      try {
        const { data } = await billingHistoryList({ customerId: this.customer.id })
        this.tableData = data.data.map(item => {
          item.amount = item.amount ? `$${item.amount / 100}` : '-'
          return item
        })
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    async download (row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const arr = row.invoicesList
      const { invoiceDownload } = this.$interface.pay
      arr.map(async item => {
        const { data } = await invoiceDownload({ id: item })
        axios.get(data.data, { responseType: 'blob' }).then(res => {
          let filename = getUrlParams(data.data)['response-content-disposition'].split('filename=')[1]
          JsFileDownload(res.data, filename)
          loading.close()
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #262626;
  line-height: 24px;
}
.icon{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F4F8;
  border-radius: 2px 2px 2px 2px;
  margin-right: 8px;
  cursor: pointer;
}
</style>
